
/*
* @Description: 这三个不同的组件都含有很多相同的逻辑因此抽象出来
*/
import { mapGetters } from 'vuex'
import tool from '@/util/tool'
export default {
  props: {
    componentId: {
      type: String,
      default: '',
      required: true
    },
    activityCode: {
      type: String,
      default: '',
      required: true
    },
    ruleContents: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    pageData () {
      let model = this.pageContent.componentList.find(
        item => item._id === this.componentId
      )
      return { ...model }
    },
    list () {
      // 过滤人群规则
      let tempList = this.pageData.imageList
      if (this.ruleContents && this.ruleContents.length > 0) {
        let hideList = this.ruleContents
          .filter((item) => !item.hit)
          .map((item) => item.elementCode)
        tempList = tempList.filter(
          (item) => !hideList.includes('elecode_' + item._id)
        )
      }
      return tempList
    },
    getRadius () {
      if (this.pageData.radius === 0) return null
      return this.pageData.radius_value + 'px'
    },
    getBoxShadow () {
      if (this.pageData.shadow === 0) return null
      let result =
        this.pageData.shadow_x +
        'px ' +
        this.pageData.shadow_y +
        'px ' +
        this.pageData.shadow_blur +
        'px ' +
        this.pageData.shadow_spread +
        'px ' +
        this.pageData.shadow_color
      return result.toString()
    }
  },
  data() {
    return {
      defaultImg: '/images/default-img/default-gray.png'
    }
  },
  methods: {
    loadImage (item) {
      this.$sendQdas('8888110803', { item_name: '魔方组件-图片加载成功', item_id: item._id, extra1: item && item.image })
      setTimeout(() => {
        this.renderHotArea(item)
      }, 1200)
    },
    renderHotArea (item) {
      let getDomId = document.getElementById('img_' + item._id) 
      if (getDomId !== null) {
        let w = getDomId.offsetWidth
        let h = getDomId.offsetHeight
        let top = getDomId.offsetTop
        let left = getDomId.offsetLeft
        item.hotAreaList.forEach(area => {
          let element = document.getElementById(
            'a' + '_' + item._id + '_' + area._id
          )
          let text = `width:${area.w * w * 1}px;height:${area.h * h * 1.1}px;top:${top +
              area.y * h}px;left:${left + area.x * w}px;`
          element.style.cssText = text
        })
      }
    },
    navigateTo (item) {
      // window.App.accountStatus((res) => {
      //   if (!res || !res.isLogin) {
      //     tool.goToLogin()
      //     return
      //   } else {
      this.gotoPage(item)
      // }
      // })
    },
    gotoPage (item) {
      this.$sendQdas('8888110802', { item_name: '魔方组件-点击', item_id: item && item._id, extra1: item && item.link, extra2: item && item.image })
      if (!item.link) return
      tool.navigateTo(item.link)
    }
  }
}